<style scoped>
.layui-row {
    overflow: hidden;
}

.select-item {
    width: 34.333333%;
    float: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}

.department>>>.layui-table td,
.layui-table th {
    padding: 9px 2px;
    white-space: nowrap;
}

.layui-row {
    overflow: hidden;
}

.select-item {
    width: 100%;
    text-align: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}

.layui-inline {
    padding: 5px 0;
}
</style>

<template>
<div class="organization">
    <div>
        <a href="javascript:;" class="layui-btn" @click="add"><i class="layui-icon">&#xe654;</i>添加渠道</a>
    </div>
    <form class="layui-form">
        <div class="layui-row">
            <div class="layui-col-lg4 select-item" style="text-align: right">
                <div class="layui-inline" style="width: 220px">
                    <select name="departid" id="departid" lay-filter="departid" class="layui-form-select">
                        <option value="">请选择部门</option>
                        <option v-for="(item, index) in departments" :key="item.guid" :value="item.guid">{{item.name}}</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 220px">
                    <select name="brandid" id="brandid" lay-filter="brandid" class="layui-form-select">
                        <option value="">请选择品牌</option>
                        <option v-for="(item, index) in brands" :key="item.guid" :value="item.guid">{{item.name}}</option>
                    </select>
                </div>

                <button type="button" class="layui-btn sou" @click="search">搜索</button>
            </div>
        </div>

    </form>

    <div style="width: 100%; overflow: auto;margin-bottom: 10px;" id="textarea">
        <table class="layui-table layui-form">

            <thead>
                <tr>
                    <th>渠道部门</th>
                    <th> 品牌名称</th>
                    <!--                <th  > 品种名称</th>-->
                    <!--                <th >规格名称</th>-->

                    <th>创建人</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="id9" v-for="(val, index) in channels" :key="val.guid">
                    <td>{{val.departName}}</td>
                    <td>{{val.brand}}</td>
                    <!--                    <td>{{val.product}}</td>-->
                    <!--                    <td>{{val.productName}}</td>-->

                    <td>{{val.operator}}</td>
                    <td>{{val.createtime}}</td>

                    <td>
<!--                        <a href="javascript:;" @click="edit(val.guid)">修改</a> | -->
                        <a href="javascript:;" @click="del(val.guid)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage"></Pagination>
    <div style="height: 200px"></div>
</div>
</template>

<script>
import Pagination from '../common/Pagination.vue'
let qs = require('qs');
export default {
    name: 'ChannelList',
    components: {
        Pagination
    },
    data() {
        return {
            datacategory: [],
            currentPage: 1,
            totalPage: 0,
            searchName: '',
            channels: [],
            typeEmnu: [],
            type: '',
            departments: [],
            salesspecification: [],
            productinfo: [],
            salesspecificationid: '',
            product: '',
            departid: '',
            brands: '',
            brandid: ''
        }
    },
    updated: function () {
        layui.form.render('select');
        layui.form.render();
    },
    mounted() {
        let that = this;
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;
            that.getPageData();
            that.getDictEmnu();
            that.getDeparts();
            that.getBrands();
            form.on('select', function (data) {
                console.log(data.elem.name);
                if (data.elem.name == 'product') {
                    that[data.elem.name] = $(data.elem).find("option:selected").text();
                } else {
                    that[data.elem.name] = data.elem.value;
                }

            })
        });

    },
    methods: {
        search: function () {
            this.getPageData('search');
        },
        turnPage: function (data) {
            this.currentPage = data;
            this.getPageData();
        },
        getPageData: function (type = '') {
            let that = this;
            let loader = layui.layer.load();

            let postData = {};
            if (type != 'search') {
                postData.page = that.currentPage;
            } else {
                postData.page = 1;
            }

            postData.departid = that.departid;
            postData.brandid = that.brandid;
            //postData.product = that.product ;

            $.ajax({
                url: '/sales/Channel!list.action',
                type: "post",
                data: postData,
                dataType: "json",
                success: function (res) {
                    if (res.flag == "success") {
                        //分页数据赋值
                        // that.currentPage = res.result.indexPage;
                        that.totalPage = res.result.pageCount;
                        that.channels = res.result.rows;
                    } else {
                        that.alert("系统错误");
                    }
                },
                complete: function () {
                    layer.close(loader);
                }
            });
        },
        add: function () {
            this.$parent.switchPage('ChannelAdd');
        },
        edit: function (id) {
            this.$parent.gid = id;
            this.$parent.switchPage('ChannelEdit');
        },
        del: function (id) {
            let that = this;
            layer.confirm('确定要删除该数据？', function () {
                let loader = layer.load();
                $.ajax({
                    url: '/sales/Channel!del.action',
                    type: "post",
                    data: {
                        guid: id
                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.msg == "success") {
                            that.toast("删除成功");
                            that.getPageData();
                        } else {
                            that.toast('系统错误！');
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });

            })
        },
        persionSize: function () {
            return '80px'
        },
        AmountSize: function () {
            return '60px'
        },

        /**
         * 2020-3-30
         * Liukx
         * 添加管理类型
         */
        getDictEmnu: function () {
            this.$post('/sales/Channel!getBaseInfo.action')
                .then(response => {
                    let data = response.data;
                    if (data.info != 'error') {
                        //this.salesspecification = data.salesspecification== null?"":data.salesspecification;
                        this.productinfo = data.productinfo == null ? "" : data.productinfo;
                        //salesspecificationArray = data.salesspecification== null?"":data.salesspecification;
                    } else {
                        this.toast('获取产品数据失败！');
                    }
                })
        },
        getDeparts: function () {
            this.$post('/sales/Department!listAll.action', qs.stringify({
                type: 1
            }))
                .then(response => {
                    let data = response.data;
                    if (data.info != 'error') {
                        this.departments = data.info;
                    } else {
                        this.toast('获取部门数据失败！');
                    }
                })
        },
        getBrands: function() {
            this.$post('/sales/Brand!getList.action')
                .then(response => {
                    let data = response.data;
                    if (data.msg == 'scucess') {
                        this.brands = data.list;
                    } else {
                        this.toast('获取品牌数据失败！');
                    }
                })
        }
    }
}

var salesspecificationArray = [];

layui.use(['layer', 'jquery', 'form'], function () {
    var layer = layui.layer,
        $ = layui.jquery,
        form = layui.form;

    form.on('select(product)', function (data) {
        console.log("data", data)
        // console.log(data);
        // console.log();
        // $('#salesspecificationid').html("");
        // $('#salesspecificationid').append(new Option("请选择规格", ""));
        // var salesspecificationid = data.value;
        // for ( var i = 0; i <salesspecificationArray.length; i++){
        //     if(salesspecificationArray[i].productGuid == salesspecificationid){
        //         $('#salesspecificationid').append(new Option(salesspecificationArray[i].name, salesspecificationArray[i].guid));// 下拉菜单里添加元素
        //     }
        // }
        $.ajax({
            url: '/sales/Salesspecification!findByProductguid.action',
            type: "post",
            data: {
                productguid: data.value
            },
            dataType: "json",
            success: function (res) {
                console.log("res", res);
                for (var i = 0; i < res.info.length; i++) {
                    $('#salesspecificationid').append(new Option(res.info[i].name, res.info[i].guid)); // 下拉菜单里添加元素
                }

                // if (res.msg == "success") {
                //     that.toast("删除成功");
                //     that.getPageData('search');
                // }  else {
                //     that.toast('系统错误！');
                // }
                layui.form.render("select");
            }
        });

    });
});
</script>
